<script lang="ts">
	import { computed, reactive, ref } from 'vue'
	import { useToast } from 'wot-design-uni'
	import type { PhoneLoginReq } from '@/apis'
	import { getSmsCaptcha } from '@/apis'
	import { useUserStore } from '@/stores'

	export default {
		options: {
			virtualHost: true, // 虚拟节点
			styleIsolation: 'shared', // 解除样式隔离
		},
	}
</script>

<script lang="ts" setup>
	const emits = defineEmits(['back'])

	const userStore = useUserStore()
	const loading = ref(false)
	const form = reactive<PhoneLoginReq>({
		phone: '',
		captcha: '',
	})

	// 验证码
	const captchaTimer = ref()
	const captchaTime = ref(60)
	const captchaBtnName = ref('获取验证码')
	const captchaDisable = ref(false)
	const captchaLoading = ref(false)
	// 重置验证码
	const resetCaptcha = () => {
		clearInterval(captchaTimer.value)
		captchaTime.value = 60
		captchaBtnName.value = '获取验证码'
		captchaDisable.value = false
	}

	const toast = useToast()
	const canLogin = computed(() => {
		if (form.phone && form.captcha) {
			return true
		}
		return false
	})

	const getCaptcha = async () => {
		if (!form.phone) {
			toast.warning('请输入正确的手机号')
			return
		}
		try {
			captchaLoading.value = true
			captchaBtnName.value = '发送中...'
			await getSmsCaptcha({
				phone: form.phone,
			})
			captchaLoading.value = false
			captchaDisable.value = true
			captchaBtnName.value = `(${(captchaTime.value -= 1)}s)`
			toast.success('短信发送成功,请注意查收!')
			captchaTimer.value = setInterval(() => {
				captchaTime.value -= 1
				captchaBtnName.value = `(${(captchaTime.value -= 1)}s)`
				if (captchaTime.value <= 0) {
					resetCaptcha()
				}
			}, 1000)
		} catch (error) {
			// toast.error('短信发送失败,请注意查收!')
			console.log('error: ', error)
			resetCaptcha()
		} finally {
			captchaLoading.value = false
		}
	}

	const onLogin = async () => {
		loading.value = true
		try {
			await userStore.loginByPhone(form)
			await userStore.refreshUserInfo()
			uni.switchTab({ url: '/pages/index/index' })
		} finally {
			loading.value = false
		}
	}

	const onBack = () => {
		emits('back')
	}
</script>

<template>
	<wd-toast />
	<view class="my w-full">
		<wd-input v-model="form.phone" type="digit" size="large" placeholder="请输入手机号" clearable :maxlength="11"
			:no-border="true" :use-prefix-slot="true">
			<template #prefix>
				<i class="iconfont iconfont-mobile text-gray-5 !text-size-xl" />
			</template>
		</wd-input>
	</view>

	<view class="my w-full flex-row-between-center">
		<wd-input v-model="form.captcha" type="digit" size="large" placeholder="验证码" clearable :maxlength="6"
			:no-border="true" :use-prefix-slot="true">
			<template #prefix>
				<i class="iconfont iconfont-lock text-gray-5 !text-size-xl" />
			</template>
		</wd-input>
		<view class="ml h-44px w-220rpx">
			<button size="mini" class="w-full bg-primary text-white !px-8px" :loading="captchaLoading"
				:disabled="captchaDisable" @click="getCaptcha">
				<text class="text-14px leading-44px">
					{{ captchaBtnName }}
				</text>
			</button>
		</view>
	</view>
	<wd-button :block="true" :round="false" size="large" :disabled="!canLogin" :loading="loading" @click="onLogin">
		登录
	</wd-button>
	<!-- <button
    class="btn-secondary mt"
    plain
    :disabled="!canLogin"
    :loading="loading"
    @click="onLogin"
  >
    登录
  </button> -->
	<view class="mt">
		<wd-button style="margin-top: 6rpx;" :block="true" :round="false" size="large" plain @click="onBack">
			返回
		</wd-button>
	</view>
</template>

<style lang=scss scoped>

</style>